<template>
  <div class="health">
    <van-nav-bar
      title="养生之道"
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="yang_container">
        <ul class="yang_list">
          <li class="yang_li" v-for="(item, index) in yangList" :key="index">
            <div class="yang_left" @click="goTo(`/yang/${item.id}`)">
              <img class="yang_img" :src="item.url" style="width: 30%" />
              <div class="user_yangtitle">
                {{ item.title }}
              </div>
            </div>
          </li>
        </ul>
        <p class="CardList_content">没有更多了</p>
      </div>
      <ArticleInfo></ArticleInfo>
    </van-pull-refresh>
  </div>
</template>
<script>
import { reqyang } from "../../api";
import { mapState } from "vuex";
import ArticleInfo from "@/components/ArticleInfo/ArticleInfo.vue";
// JS
export default {
  data() {
    return {
      yangList: [],
      like_count: 0,
      flg: true,
      isLoading: false,
    };
  },
  created() {
    reqyang().then((res) => {
      this.yangList = res.data;
      // console.log(res);
    });
  },
  computed: {
    ...mapState(["goods"]),
  },
  methods: {
    zan() {
      if (this.flg) {
        this.like_count++;
        this.flg = false;
      } else {
        this.like_count--;
        this.flg = true;
      }
    },
    goTo(path) {
      this.$router.push(path);
    },
    onRefresh() {
      setTimeout(() => {
        reqyang().then((res) => {
          this.yangList = res.data;
        });
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 3000);
    },
    // 返回上一级
    onClickLeft() {
      this.$router.replace("/");
    },
  },
  mounted() {
    this.$store.dispatch("getShopGoods");
  },
  components: {
    ArticleInfo,
  },
};
</script>
<style>
.health {
  width: 100%;
  height: 100%;
}
.health_top {
  width: 100%;
  line-height: 50px;
  height: 50px;
  background-color: green;
}
.user_yang {
  margin-left: 42%;
}
.health_img {
  display: block;
  width: 100%;
  height: 105px;
}
.yang_left {
  margin-bottom: 10px;
}
.user_yangtitle {
  float: right;
  width: 60%;
  padding: 16px 0;
}
.van-nav-bar {
  background-color: #409eff !important;
}
</style>
